<template>
  <AvicModal
    v-if="visible"
    :visible="visible"
    :title="fatherTitle"
    width="1000px"
    height="600px"
    :centered="true"
    :footer="null"
    :body-style="{ padding: '10px' }"
    @cancel="closeModal"
  >
    <div class="process-tracking-modal" style="height: 100%">
      <div style="height: 100%">
        <AvicBpmChart :bpm-instance-object="bpmInstanceObject" :open-process-tracking="true" :show-bpm-open-form-but="false" />
      </div>
    </div>
  </AvicModal>
</template>
<script lang="ts" setup>
// 引入过程图组件
import AvicBpmChart from '@/views/avic/bpmpi/bpmpidesigner/components/x6/bpmpi-perview/index.vue';
// 引入文字跟踪组件
import BpmInstanceObject from '@/views/avic/bpm/bpmutils/FlowEditor'; // 引入过程变量

const $emit = defineEmits(['closeFather']);
const props = defineProps({
  entryId: {
    type: String,
    default: ''
  },
  fatherTitle: {
    type: String,
    default: '过程跟踪'
  }
});
const visible = ref(true);
const bpmInstanceObject = ref(new BpmInstanceObject());
onMounted(() => {
  bpmInstanceObject.value.bpmModel.entryId = props.entryId;
});
/** 隐藏弹窗 */
function closeModal() {
  $emit('closeFather');
}
</script>
<style scoped lang="less">
:deep(.ant-spin-nested-loading, .ant-spin-container) {
  height: 100%;
}
:deep(.graph-container) {
  // height: calc(100% - 70px);
  height: 100%;
  :deep(.layout) {
    height: calc(100% - 8px);
    :deep(.graph-main-container) {
      position: initial;
    }
    :deep(.x6-graph-scroller) {
      overflow: auto;
    }
  }
}
</style>
